<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.4.1.js"></script>
    <style>

        .room-center {
            display: flex;
            justify-content: center;
        }

        .my-center {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 300px;
            align-items: center;
            border: 1px solid black;
            border-radius: 3px;
            margin: 5px;
        }

        .my-center > * {
            margin: 5px;
        }

        .my-center textarea {
            width: 200px;
            height: 100px;
        }

        .my-center button {
            width: 100px;
        }

    </style>
</head>
<body>
<div class="room-center">
    测试数据:<span id="testData1">[1,2,3,4,5,6,7,7,8,9]</span>
</div>
<div class="room-center">
    <div class="my-center">
        <textarea readonly="readonly" id="cell2"></textarea>
        <button onclick="mapFunc()">map方法给数组种的每个元素添加前缀</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="cell3"></textarea>
        <button onclick="reduceFunc()">使用reduce方法对其中的元素进行求和</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="cell4"></textarea>
        <button onclick="filterFunc()">使用filter方法过滤出只大于5的元素</button>
    </div>
</div>
</body>
<script type="text/javascript">

    function mapFunc() {
        let testData1Obj = JSON.parse($("#testData1").text());
        let mapRes = testData1Obj.map(x => "prefix" + x);
        $("#cell2").val(JSON.stringify(mapRes));
    }

    /**
     * 说明:
     * 1. reduce方法有两个参数, 第一个参数接收一个函数, 第二个参数接收默认值, 相当于聚合操做的起始值.
     */
    function reduceFunc() {
        let testData1Obj = JSON.parse($("#testData1").text());
        let reduceRes = testData1Obj.reduce((sum, x) => sum += x, 0);
        $("#cell3").val(reduceRes);
    }

    function filterFunc() {
        let testData1Obj = JSON.parse($("#testData1").text());
        let filterRes = testData1Obj.filter(x => x > 5);
        $("#cell4").val(JSON.stringify(filterRes));
    }

</script>
</html>